<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：    语法：任意选择器：hover 【悬停】  每个伪类选择器，具备特点
			                  所有元素具备：hover   【常见伪类选择器】
			 */
			h1:hover{
				background: #5fe7ee;
				color: #ee7841;
			}
			/* 
			 伪类选择器：  link            链接未被点击时状态
			              active          链接被点击时状态
						  visited         链接被点击后状态
						  hover           悬停链接时状态
			主要结合在一起，针对a元素效果
			 */
			a:link{/*链接未被点击时状态*/
				color: #94ee74;
				/* 去掉超链接下划线 */
				text-decoration: none;
			}
			 a:active{ /*链接被点击时状态*/
				color: #ee0a0a;
				background: #a26bee;
			}
			a:visited{/*链接被点击后状态*/
				color: #2d7bee;
				background: #dcee11;
			}
			a:hover{
				font-size: 36px;
			}
			/* 
			伪类选择器 ：input  focus 获取焦点  鼠标点击输入框时效果
			针对输入框 input元素
			
			*/
		   input:focus{
			   background: #2d7bee;
		   }
		   /* 伪类选择器：     :first-child 第一个儿子元素
			                  ：last-child 最后一个儿子元素
							  ：nth-child(n)  匹配n个儿子
			   针对：父子级，默认父子级 table、列表..
			
			*/
		   li:first-child{
			   background: #9aeeb2;
			   color: #5fe7ee;
		   }
		   li:last-child{
			   font-size: 15pt;
		   }
		   li:nth-child(2){
			   background: #d2eeb8;
			   font-size: 15px;
		   }
		   li:nth-child(3){
		   			   background: #54bdee;
		   			   font-size: 15px;
		   }
		</style>
	</head>
	<body>
		<h1> 鼠标悬停效果</h1>
		<a href="">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>